<template>
  <div class="myAttendance">
    <!-- 搜索区域 -->
    <att-search
      :search="search"
      :labval="labval"
      :add="add"
      :isslots="isslots"
      :islabel="'状态名称:'"
      @onSearch="toSearch"
      @resetForm="resetForm"
      @addAttendence="addAttendence"
    >
      <template v-slot:slot-content>
        <el-col :span="7">
          <el-form-item label="考勤时间:">
            <el-date-picker
              v-model="search.attTime"
              type="daterange"
              range-separator="——"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </template>
    </att-search>
    <!-- 数据表 -->
    <div class="attTable">
      <data-table
        :tableheader="tableheader"
        :datatable="tableDate"
        :loading="loading"
        :client-height="clientHeight"
      />
    </div>
    <!-- 分页 -->
    <pagination
      :page="page"
      :count="count"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></pagination>
    <!-- 添加考勤记录弹窗 -->
    <add-dialog
      :title="recordDialogTitle"
      :dialogvisible="recordDialog"
      @closeDialog="closeRecordDialog()"
      @determine="addRecord()"
    >
      <template v-slot:add-content>
        <el-form
          ref="recordForm"
          :model="recordForm"
          label-width="90px"
          :rules="rules"
        >
          <el-form-item label="用户姓名:" prop="userId">
            <el-select v-model="recordForm.userId" filterable placeholder="请选择">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="考勤时间:" prop="attTime">
            <el-date-picker
              v-model="recordForm.attTime"
              type="datetime"
              placeholder="选择日期时间"
              >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </template>
    </add-dialog>
  </div>
</template>

<script>
import AttSearch from "@/views/components/search";
import DataTable from "@/views/components/dataTable";
import addDialog from "@/views/components/addDialog";
import pagination from "@/views/components/pagination";
import { changeDate } from "@/util/dateUtil.js"
export default {
  components: {
    AttSearch,
    DataTable,
    addDialog,
    pagination
  },
  data() {
    return {
      isslots: true, // 是否开启搜索区域插槽
      loading: false, // 加载开关
      recordDialogTitle: '添加考勤记录', // 考勤记录弹窗标题
      recordDialog: false, // 考勤记录弹窗
      count: 0, //总数据量
      clientHeight: '55.8vh', // 数据表高度
      // 分页
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      // 搜索内容
      search: {
        type: "",
        keyword: "",
        attTime: ""
      },
      // 下拉框的值
      labval: [
        {
          label: "签到正常",
          value: "1",
        },
        {
          label: "迟到",
          value: "2",
        },
        {
          label: "早退",
          value: "6",
        },
        {
          label: "迟到转事假",
          value: "4",
        },
        {
          label: "签退正常",
          value: "5",
        },
        {
          label: "缺卡",
          value: "3",
        },
      ],
      // 添加按钮
      add: [
        {
          name: "添加考勤记录",
          click: "addAttendence",
        },
      ],
      // 表头
      tableheader: [
        {
          label: "用户姓名",
          prop: "username",
          width: "390",
          issort: false,
        },
        {
          label: "考勤时间",
          prop: "attendanceTime",
          width: "390",
          issort: true, //用于判断是否排序
        },
        {
          label: "签到状态",
          prop: "signInStatus",
          width: "400",
          issort: false,
        },
        {
          label: "签退状态",
          prop: "signOffStatus",
          width: "400",
          issort: false,
        },
      ],
      tableDate: [], // 数据列表
      userList: [], // 用户列表
      // 考勤记录表单
      recordForm: {
        userId: '',
        attTime: ''
      },
      rules: {
        "userId": [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        "attTime": [
          { required: true, message: "请选择考勤时间", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getMyAttData(this.page.pageNum, this.page.pageSize);
  },
  methods:{
    // 获取我的考勤列表数据
    async getMyAttData(pageNum, pageSize, keyword, type, startTime, endTime) {
      this.loading = true;
      let res = await this.$http.get('/record/list', {
        params:{
          pageNum: pageNum || 1,
          pageSize: pageSize || 10,
          username: keyword || '',
          status: type || '',
          startTime: startTime || '',
          endTime: endTime || ''
        }
      })
      if(res.code == 0) {
        this.count = res.data.count;
        this.tableDate = res.data.list;
        this.loading = false;
      }
    },
    // 关闭考勤记录弹窗
    closeRecordDialog() {
      this.recordForm.userId = '';
      this.recordForm.attTime = '';
      this.recordDialog = false;
    },
    // 添加考勤记录按钮
    addAttendence() {
      this.recordForm.userId = '';
      this.recordForm.attTime = '';
      this.$http.get('/user/list', {
        params:{
          pageNum: 1,
          pageSize: 100
        }
      }).then(res => {
        this.userList = res.data.list;
      })
      this.recordDialog = true;
    },
    // 确认添加考勤记录
    addRecord() {
      this.$refs['recordForm'].validate((valid) => {
        if (valid) {
          let date = this.recordForm.attTime;
          let attendanceTime = changeDate(date);
          this.$http.post('/record/saveOrUpdate', {
            userId: this.recordForm.userId,
            attendanceTime,
          })
            .then( res => {
              if(res.code == 0) {
                this.recordDialog = false;
                this.$message({
                  message: res.message,
                  type: 'success'
                });
                this.handleCurrentChange(1);
              }else{
                this.recordDialog = false;
              }
            })
          this.$refs['recordForm'].resetFields();
        } else {
          return false;
        }
      });
    },
    // 搜索按钮
    async toSearch() {
      let keyword = this.search.keyword;
      let status = this.search.type;
      let startTime = this.search.attTime ? this.search.attTime[0]:'';
      let endTime = this.search.attTime ? this.search.attTime[1]:'';
      this.getMyAttData(1, 10, keyword, status, startTime, endTime);
    },
    // 重置按钮
    resetForm() {
      this.search.type = '';
      this.search.keyword = '';
      this.search.attTime = '';
      this.handleCurrentChange(1);
    },
    // 页面数量改变时触发事件
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getMyAttData(this.page.pageNum, val);
    },
    // 当前页改变时触发事件
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getMyAttData(val, this.page.pageSize);
    },
  }
};
</script>

<style lang='scss' scoped>
.myAttendance {
  padding: 15px;
  background-color: #ffffff;

}
</style>